<!DOCTYPE html>
<!--**
 *Created by wf_H on 2018/8/6.
 *by:web_hwf@sina.com
 *-->
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>组织结构图</title>

    <!--使用IE兼容模式渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <meta name="renderer" content="webkit">

    <link rel="stylesheet" href="../style/dist/zui@1.8.1/css/zui.min.css">
    <link rel="stylesheet" href="../style/dist/zui@1.8.1/css/zui-theme.css">
    <link rel="stylesheet" href="../style/dist/hover.css">

    <link rel="stylesheet" href="../style/h-base.css">
    <link rel="stylesheet" href="../style/h-index.css">


</head>
<body class="childrenBody">


<section class="row">
    <div class="col-xs-12">
        <div class="wc_bg_color text-right">
            <form class="form-inline">
                <div class="form-group">
                    <select type="text" class="form-control" style="min-width: 170px">
                        <option value="">所选角色</option>
                        <option value="">xxxxxx</option>
                        <option value="">xxxxx</option>
                    </select>
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" id="input_01" placeholder="请输入姓名">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" id="input_02" placeholder="请输入手机号">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" id="input_03" placeholder="请输入部门名称">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" id="input_04" placeholder="请输入备注消息">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" id="input_05" placeholder="激活时间">至
                    <input type="text" class="form-control" id="input_06" placeholder="激活时间">
                </div>
                <button class="btn btn-success">搜索</button>
                <button class="btn btn-warning">重置</button>
            </form>
        </div>
    </div>
    <div class="col-xs-12">
        <div class="wc_bg_color text-right">
            <div id="chart-container"></div>
        </div>
    </div>
</section>




<script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../style/dist/zui@1.8.1/js/zui.min.js"></script>

<!-组织结构插件-->
<script type="text/javascript"  href="../style/dist/orgChart/js/jquery.orgchart.js"></script>


<script>
    var datascource = {
        'id': '1',
        'name': 'Lao Lao',
        'title': 'general manager',
        'children': [{
            'id': '2',
            'name': 'Bo Miao',
            'title': 'department manager'
        },
            {
                'id': '3',
                'name': 'Su Miao',
                'title': 'department manager',
                'children': [{
                    'id': '4',
                    'name': 'Tie Hua',
                    'title': 'senior engineer'
                },
                    {
                        'id': '5',
                        'name': 'Hei Hei',
                        'title': 'senior engineer',
                        'children': [{
                            'id': '6',
                            'name': 'Pang Pang',
                            'title': 'engineer'
                        },
                            {
                                'id': '7',
                                'name': 'Xiang Xiang',
                                'title': 'UE engineer'
                            }]
                    }]
            },
            {
                'id': '8',
                'name': 'Yu Jie',
                'title': 'department manager'
            },
            {
                'id': '9',
                'name': 'Yu Li',
                'title': 'department manager'
            },
            {
                'id': '10',
                'name': 'Hong Miao',
                'title': 'department manager'
            },
            {
                'id': '11',
                'name': 'Yu Wei',
                'title': 'department manager'
            },
            {
                'id': '12',
                'name': 'Chun Miao',
                'title': 'department manager'
            },
            {
                'id': '13',
                'name': 'Yu Tie',
                'title': 'department manager'
            }]
    };
    $('#chart-container').orgchart({
        'data': datascource,
        'nodeContent': 'title',
        'nodeID': 'id',
        'createNode': function($node, data) {
            var secondMenuIcon = $('<i>', {
                'class': 'fa fa-info-circle second-menu-icon',
                click: function() {
                    $(this).siblings('.second-menu').toggle();
                }
            });
            var secondMenu = '<div class="second-menu"><img class="avatar" src="../img/avatar/' + data.id + '.jpg"></div>';
            $node.append(secondMenuIcon).append(secondMenu);
        }
    });
</script>
</body>
</html>